<script setup lang="ts">
import { nextTick, onMounted, ref, watch } from 'vue'
import { propTypes } from '@/utils/propTypes'

const props = defineProps({
  leftSpan: propTypes.number.def(4),
  lgSpan: propTypes.number.def(3)
})
const rightSpan = ref<number>(20)
const lgRight = ref<number>(21)
const state = {
  isMove: false,
  islock: false,
  isInit: false,
  row: null,
  left: null,
  resize: null
}
watch(
  () => props.leftSpan,
  (num: number) => {
    rightSpan.value = 24 - num
  },
  {
    immediate: true
  }
)

watch(
  () => props.lgSpan,
  (num: number) => {
    lgRight.value = 24 - num
  },
  {
    immediate: true
  }
)
// eslint-disable-next-line vue/no-export-in-script-setup
const hideLeft = (isAutoRecovery = true) => {
  state.islock = isAutoRecovery
  state.isInit = true
  state.width = state.left.clientWidth
  const height = state.row.clientHeight
  // 鼠标拖动事件
  if (state.right.clientHeight < height) {
    state.right.style.minHeight = height + 'px'
  }
  state.resize.style.left = '0px'
  state.left.style.width = state.resize.clientWidth + 'px'
  state.left.style.maxWidth = state.left.style.width
  state.right.style.width = state.row.clientWidth - state.resize.clientWidth + 'px'
  state.right.style.maxWidth = state.right.style.width
}
const recovery = () => {
  state.islock = false
  state.isInit = true
  state.resize.style.left = state.width + 'px'
  state.left.style.width = state.width + 'px'
  state.left.style.maxWidth = state.left.style.width
  state.right.style.width = state.row.clientWidth - state.width + 'px'
  state.right.style.maxWidth = state.right.style.width
}
const initMove = () => {
  state.row = document.getElementsByClassName('content')[0]
  state.left = document.getElementById('left-tree')
  state.resize = document.getElementById('resize')
  state.right = document.getElementById('right-content')
  if (state.resize) {
    state.resize.onclick = function (e) {
      if (state.islock === false) {
        return
      }
      recovery()
    }
    // 鼠标按下事件
    state.resize.onmousedown = function (e) {
      if (state.islock) {
        return
      }
      const startX = e.clientX
      state.resize.left = state.resize.offsetLeft
      const width = state.row.clientWidth
      if (width == null) {
        return
      }
      state.isMove = true
      state.isInit = true
      const height = state.row.clientHeight
      const minWidth = state.resize.clientWidth
      const rightWidth = width - state.resize.left - minWidth
      // 鼠标拖动事件
      if (state.right.clientHeight < height) {
        state.right.style.minHeight = height + 'px'
      }
      document.onmousemove = function (e) {
        const size = e.clientX - startX
        const leftX = state.resize.left + size
        if (leftX >= minWidth && leftX <= width - minWidth) {
          state.resize.style.left = leftX + 'px'
          state.left.style.width = leftX + 'px'
          state.left.style.maxWidth = state.left.style.width
          state.right.style.width = rightWidth - size + 'px'
          state.right.style.maxWidth = state.right.style.width
        }
      }
      document.onmouseup = function () {
        document.onmousemove = null
        document.onmouseup = null
        state.isMove = false
      }
    }
  }
}
onMounted(() => {
  nextTick(initMove)
})
defineExpose({ hideLeft })
</script>
<template>
  <el-row id="row" class="content">
    <el-col id="left-tree" :md="leftSpan" :lg="lgSpan" class="left-tree">
      <slot name="left"></slot>
      <div id="resize" class="resize" title="长按左右拖动">⋮</div>
    </el-col>
    <el-col id="right-content" :md="rightSpan" :lg="lgRight" class="right-content">
      <slot name="right"></slot>
    </el-col>
  </el-row>
</template>

<style scoped>
.ant-card-body {
  padding-top: 0 !important;
}

.content {
  display: flex !important;
  width: 100%;

  .left-tree {
    position: relative;
    height: 100%;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.050980392156862744);
    border-radius: 4px;
    vertical-align: top;
    display: inline-block;
    box-sizing: border-box;
    -ms-flex-negative: 0;
    flex: auto !important;
    flex-shrink: 0;
    padding: 10px 0 0 10px;
  }

  .resize {
    cursor: col-resize;
    position: absolute;
    top: 45%;
    right: -8px;
    background-color: #d6d6d6;
    border-radius: 5px;
    margin-top: -10px;
    width: 10px;
    height: 50px;
    background-size: cover;
    background-position: 50%;
    font-size: 32px;
    color: #fff;
  }

  .right-content {
    display: inline-block;
    height: 100%;
    flex: auto !important;
    -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.050980392156862744);
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.050980392156862744);
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    vertical-align: top;
    overflow: auto;
  }
}
</style>
